<template>
	<view class="container">

		<view class="form-container">
			<input class="title-input" v-model="form.title" placeholder="输入标题" maxlength="50" />

			<view class="content">
				<textarea class="content-textarea" v-model="form.content" placeholder="输入内容" auto-height
					maxlength="1000" />
			</view>

			<view class="content-count">
				<span>{{form.content.length}}/1000</span>
			</view>


			<button class="save-btn" @click="saveNote">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					title: '',
					content: ''
				},
				isEdit: false,
				noteId: null
			};
		},
		onLoad(options) {
			if (options.id) {
				this.isEdit = true;
				this.noteId = options.id;
				this.getNoteDetail();
			}
		},
		methods: {
			async getNoteDetail() {
				uni.showLoading({
					title: '加载中'
				});
				const res = await uniCloud.callFunction({
					name: 'note',
					data: {
						action: 'getDetail',
						params: {
							id: this.noteId
						}
					}
				});
				uni.hideLoading();

				if (res.result.code === 200) {
					this.form = {
						title: res.result.data.title,
						content: res.result.data.content
					};
				} else {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			},

			async saveNote() {
				if (!this.form.title && !this.form.content) {
					uni.showToast({
						title: '标题和内容不能同时为空',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '保存中'
				});

				if (this.isEdit) {
					// 更新笔记
					const res = await uniCloud.callFunction({
						name: 'note',
						data: {
							action: 'update',
							params: {
								id: this.noteId,
								...this.form
							}
						}
					});

					uni.hideLoading();
					if (res.result.code === 200) {
						uni.showToast({
							title: '更新成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.showToast({
							title: '更新失败',
							icon: 'none'
						});
					}
				} else {
					// 添加笔记
					const res = await uniCloud.callFunction({
						name: 'note',
						data: {
							action: 'add',
							params: this.form
						}
					});

					uni.hideLoading();
					if (res.result.code === 200) {
						uni.showToast({
							title: '添加成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.showToast({
							title: '添加失败',
							icon: 'none'
						});
					}
				}
			},

		}
	};
</script>

<style scoped>
	.container {
		background-color: #FFFDD0;
		/* 米黄色纸张底色 */
		min-height: 100vh;
		padding: 20rpx;
	}

	.form-container {
		padding: 30rpx;
		background-color: #FFFDF5;
		/* 比背景稍白的纸张色 */
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(139, 125, 107, 0.05);
		border: 1rpx solid #E0D5C8;
		/* 纸张边缘线 */
	}

	.title-input {
		height: 100rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #5C4A36;
		/* 深棕色标题 */
		background-color: transparent;
		border-bottom: 1rpx solid #D4C9B8;
		/* 标题下划线 */
		padding: 0 20rpx;
		margin-bottom: 30rpx;
	}

	.title-input::placeholder {
		color: #B8A999;
		/* 浅色占位符 */
	}

	.content {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.content-textarea {
		min-height: 50px;
		font-size: 32rpx;
		color: #6E5C4B;
		/* 正文棕色 */
		background-color: transparent;
		padding: 20rpx;
		line-height: 1.8;
		width: 100%;
		height: auto;
	}

	.content-textarea::placeholder {
		color: #B8A999;
	}

	.content-count {
		text-align: right;
		font-size: 25rpx;
		color: #999999;
	}

	.save-btn {
		background-color: #D4B483;
		/* 牛皮纸按钮色 */
		color: #5C4A36;
		/* 深棕色文字 */
		border-radius: 50rpx;
		height: 80rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		border: none;
		box-shadow: 0 2rpx 6rpx rgba(92, 74, 54, 0.1);
	}

	.save-btn:active {
		background-color: #C7A87D;
		/* 点击态加深 */
	}
</style>